<template>
  <!-- <div class="about">
    <h1>This is an about page</h1>

  </div> -->
  <div>
    about
  </div>

  <div>
    <h2> {{$store.state.username}}</h2>

    <h2> {{$store.getters.newName}}</h2>

    <button @click='mutationsFn'>  点击</button>

  </div>
</template>

<script>
// 使用 store
import { useStore } from 'vuex'
export default {

  setup () {
    const store = useStore()
    // 1. 使用根模块state的数据
    console.log(store.state.username)
    // 2 使用跟模块的getters数据
    console.log(store.getters.newName)

    // 提交根模块的
    const mutationsFn = () => {
      store.dispatch('updateName')
    }

    return {
      mutationsFn
    }
  }
}
</script>
